<template>
  <WidgetEditFormContainer v-model="innerDialogShow" :inline="inline">
    <q-card>
      <template v-if="mode==='create'">
        <q-img src="../assets/PreviewRssWidget.png" alt="" :ratio="4/3"></q-img>
        <q-card-section>
          <div class="text-h6">RSS 组件</div>
          <div>订阅你感兴趣的内容，组织个性化十足且高效的信息看板~ 🚀</div>
        </q-card-section>
      </template>
      <template v-if="mode==='update'">
        <q-card-section>
          <div class="text-h6">编辑 RSS 组件</div>
        </q-card-section>
      </template>
      <q-card>
        <q-form
            @submit="submitRSSWidget"
            class="q-gutter-md"
        >
          <q-card-section class="q-pt-none">
            <q-input class="q-mb-sm" bottom-slots
                     v-model="formData.data.rsshubUrl"
                     label="RSS订阅源URL" filled
                     hint="此处输入找到的RSS订阅源URL"
                     :rules="[val=>!!val || '订阅源不可为空']"
            >
            </q-input>
            <q-input class="q-mb-sm" bottom-slots
                     v-model="formData.data.title"
                     label="RSS订阅组件标题" filled
                     hint="不输入标题则使用从订阅源获取的默认标题"
            >
            </q-input>
          </q-card-section>
          <q-card-section class="q-pt-none">
            <q-banner class="bg-grey-3">
              <div class="text-subtitle1">RSS订阅源URL 说明</div>
              <div class="text-caption">RSS订阅源即提供RSS信息内容的提供者，可以在 RSSHub 平台上找到各种内容的订阅源</div>
              <q-btn type="a" outline dense color="secondary" icon-right="link" class="q-my-sm"
                     href="https://docs.rsshub.app/zh/routes/social-media" target="_blank"
                     label="RSSHub"></q-btn>
              <div class="text-caption">RSSHub 是一个开源、简单易用、易于扩展的 RSS 生成器，可以给任何奇奇怪怪的内容生成 RSS 订阅源。RSSHub
                借助于开源社区的力量快速发展中，目前已适配数百家网站的上千项内容
              </div>
            </q-banner>
          </q-card-section>
          <q-card-section>
            <q-btn v-if="mode==='create'" type="submit"
                   color="green" icon-right="add" class="full-width"
            >确认添加
            </q-btn>
            <q-btn v-if="mode==='update'" type="submit"
                   color="green" class="full-width"
            >保存编辑
            </q-btn>
          </q-card-section>
        </q-form>
      </q-card>
    </q-card>
  </WidgetEditFormContainer>
</template>

<script>
import form from 'src/mixins/form'
import { genWidgetId } from 'src/utils/widget'
import WidgetEditFormContainer from '../../components/WidgetEditFormContainer'

export default {
  name: 'RssWidgetEditForm',
  mixins: [form],
  components: {
    WidgetEditFormContainer
  },
  props: {
    defaultFormData: {
      type: Object,
      default: () => ({ data: {} })
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  async mounted () {
    // ...
  },
  methods: {
    async submitRSSWidget () {
      if (this.mode === 'create') {
        await this.createWidget({
          id: genWidgetId('RSS_WIDGET'),
          type: 'RssWidget',
          w: 4,
          h: 4
        })
      }
      if (this.mode === 'update') {
        await this.saveWidget()
      }
    }
  }
}
</script>

<style scoped>
</style>
